﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>值班信息</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="css/pages.css" rel="stylesheet" />
    <link href="css/SignIn.css" rel="stylesheet" />
</head>
<body>
    
    <div id="week_monday">
        <span class="date_change">编辑</span>星期一<span class="date_add">新增</span>
    </div>
    <div class="week_watch" style="display:block;">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="黄忠" />
            </li>
        </ul>
    </div>

    <div id="week_tuesday">
        <span class="date_change">编辑</span>星期二<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="黄忠" />
            </li>
        </ul>
    </div>

    <div id="week_wednesday">
        <span class="date_change">编辑</span>星期三<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
        </ul>
    </div>

    <div id="week_thursday">
        <span class="date_change">编辑</span>星期四<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
        </ul>
    </div>

    <div id="week_friday">
        <span class="date_change">编辑</span>星期五<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
        </ul>
    </div>

    <div id="week_saturday">
        <span class="date_change">编辑</span>星期六<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
        </ul>
    </div>

    <div id="week_sunday">
        <span class="date_change">编辑</span>星期日<span class="date_add">新增</span>
    </div>
    <div class="week_watch">
        <ul>
            <li class="week_watch_row">
                <span class="btn_del"></span>
                <input placeholder="开始时间" />-
                <input placeholder="结束时间" />
                <input placeholder="赵云" />
            </li>
        </ul>
    </div>
        
</body>
</html>
<script type="text/javascript">
    
    $(function () {
        $(".week_watch_row").find("input").attr("readonly",true);
        togglewatch();
        ChangePalyA();
        delA();
    });

    function togglewatch() {
        $("#week_monday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_tuesday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_wednesday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_thursday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_friday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_saturday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
        $("#week_sunday").click(function () {
            $(this).next(".week_watch").toggle(1000);
        });
    }

    function ChangePalyB() {                            //暂时未调用
        $(".date_change").each(function () {
            $(this).click(function (event) {
                var condition = $(this).parent().next().find(".btn_del").css("display");
                alert(condition);
                if (condition == "none") {
                    $(this).parent().next().find(".week_watch_row").find(".btn_del").css("display", "block");
                    $(this).parent().next().css("display", "block");
                } else {
                    //$(this).parent().next().toggle(1000);
                    $(this).parent().next().find(".week_watch_row").find(".btn_del").css("display", "none");
                }
                event.stoppropagation(); //阻止冒泡
            });
        });
    };

    function ChangePalyA() { 
        $(".date_change").click(function (event) {
            var condition = $(this).parent().next().find(".btn_del").css("display");
            var thisA = $(this).parent().next().find(".week_watch_row");
            //alert(condition);
            if (condition == "none") {
                $(this).text("完成");
                $(this).parent().next().find(".week_watch_row").find(".btn_del").css("display", "block");
                $(this).parent().next().css("display", "block");
                thisA.find("input").attr("readonly", false);
            } else {
                //$(this).parent().next().toggle(1000);
                $(this).text("编辑");
                $(this).parent().next().find(".week_watch_row").find(".btn_del").css("display", "none");
                thisA.find("input").attr("readonly", true);                  //关闭后所有input变成只读；
            }
            event.stopPropagation(); //阻止冒泡
        });
    };

    function delA() {
        $(".btn_del").click(function () {
            $(this).parent().fadeOut(1000, function () {
                $(this).remove();
            });
            //alert("后台删除对应的设置");
        })
    };

        $(".date_add").click(function (event) {
            alert("需要阻止冒泡事件");
            event.stopPropagation();
        });
</script>